import { driver } from 'driver.js'
import type { Config } from 'driver.js'
import { useDesign } from './useDesign'
import 'driver.js/dist/driver.css'

const { variables } = useDesign()

export function useGuide(options?: Config) {
  const driverObj = driver(
    options || {
      showProgress: true,
      nextBtnText: '下一步',
      prevBtnText: '上一步',
      doneBtnText: '结束',
      steps: [
        {
          element: `#${variables.namespace}-menu`,
          popover: {
            title: '菜单',
            description: '以路由的结构渲染的菜单栏',
            side: 'right',
          },
        },
        {
          element: `#${variables.namespace}-tags-view`,
          popover: {
            title: '标签页',
            description: '用于记录路由历史记录',
            side: 'bottom',
          },
        },
      ],
    },
  )

  return {
    ...driverObj,
  }
}
